<template>
	<qh-page-view current="2" title="门店">
		<view class="page-box flex-column flex-column-100">
			<view class="position-box">
				<view class="tip-title">当前位置</view>
				<view class="flex-spb-cn pad_lr_20 mar-top-4">
					<text class="position-name text-ellipsis">{{positionName}}</text>
					<view class="position-text flex-cn" @click="getLocal">
						<text>重新定位</text>
						<text class="qh-rt-single qh-rt-a-zu4426 position-icon"></text>
					</view>
				</view>
			</view>
			<view class="content-box flex-column-100">
				<scroll-view scroll-y="true" class="scroll-view" :show-scrollbar="false" @scrolltolower="getDataList" refresher-enabled
					@refresherrefresh="pullDownRefresh" :refresher-triggered="isRefresh" refresher-background="transparent">
					<view class="scroll-view-content">
						<view class="tip-title">附近门店</view>
						<view class="store-item flex-start" v-for="(item, index) in dataList" :key="index" @click="chooseStore(index)">
							<qh-image :src="item.store_image_url" size="172" radius="12">
								<view slot="empty" class="empty-image flex-cn-cn">
									<text class="qh-rt-single qh-rt-mendian empty-image-icon"></text>
								</view>
							</qh-image>
							<view class="store-item-content">
								<view class="flex-cn">
									<text class="store-tag" v-if="showStoreTypeState">{{item.store_class == 1 ? '直营店' : '加盟店'}}</text>
									<view class="store-name">
										<view class="text-ellipsis">{{item.store_name}}</view>
									</view>
									<text class="distance">{{item.distance}}km</text>
								</view>
								<view class="business-time flex-cn flex-wrap">
									<text>营业时间：</text>
									<text v-for="(time, i) in item.business" :key="i">{{time}}</text>
								</view>
								<view class="goods-sale flex-cn">
									<text>在售商品{{handleTotal(item.on_sale_goods_count)}}</text>
									<text>总销量{{handleTotal(item.sales_volume)}}</text>
								</view>
								<view class="address">
									<text class="qh-rt-single qh-rt-a-zu4414 address-icon"></text>
									<text>{{item.address}}</text>
								</view>
							</view>
						</view>
						<qh-loaded-tip v-if="!canLoad && !isLoading" :text="dataList.length ? '没有更多了' : '暂无门店'"></qh-loaded-tip>
					</view>
				</scroll-view>
			</view>
		</view>
	</qh-page-view>
</template>

<script>
	export default {
		data() {
			return {
				positionName: '',
				searchForm: {
					page: 1,
					limit: 10,
					longitude: '',
					latitude: '',
					distance_sort: 1, //距离排序 1升序 2降序
				},
				isRefresh: false,
				isLoading: false,
				canLoad: true,
				dataList: [],
			}
		},
		computed: {
			showStoreTypeState() {
				return this.$store.showStoreTypeState;
			},
		},
		async onLoad() {
			await this.$onLaunched;

			const position = await this.$mutations.getLocation();
			if (position) {
				this.positionName = position.name;
				this.searchForm.longitude = position.longitude;
				this.searchForm.latitude = position.latitude;
			}
			this.getDataList();
		},
		methods: {
			//选择位置
			getLocal() {
				let obj = {};
				if (this.searchForm.longitude && this.searchForm.latitude) {
					obj = {
						longitude: this.longitude,
						latitude: this.latitude,
					}
				}
				uni.chooseLocation({
					...obj,
					success: (res) => {
						console.log(res);
						uni.setStorageSync('userPositionInfo', res);
						this.positionName = res.name;
						this.searchForm.longitude = res.longitude;
						this.searchForm.latitude = res.latitude;
						this.searchData();
					}
				});
			},
			//选择门店
			chooseStore(index) {
				
				uni.setStorageSync('settlementStore', this.dataList[index]);
				uni.navigateBack({
					delta: 1
				})
			},
			//处理统计值
			handleTotal(num) {
				if (num >= 100000) {
					return '10w+'
				}
				if (num >= 10000) {
					return '1w+'
				}
				if (num >= 1000) {
					return '999+';
				}
				return num;
			},
			async pullDownRefresh() {
				this.isRefresh = true;
				await this.searchData();
				uni.showToast({
					title: '刷新成功',
					duration: 800
				})
				this.isRefresh = false;
			},
			async searchData() {
				this.searchForm.page = 1;
				this.canLoad = true;
				await this.getDataList();
			},
			async getDataList() {
				if (this.isLoading || !this.canLoad) return;
				this.isLoading = true;
				const {
					status,
					data
				} = await this.$request('SmallProgramApi/Store/getMerchantChooseStoreList', this.searchForm);
				if (status == 1) {
					if (this.searchForm.page == 1) {
						this.dataList = data.list;
					} else {
						this.dataList.push.apply(this.dataList, data.list);
					}
					this.searchForm.page++;
					this.isLoading = false;
					this.canLoad = this.dataList.length < data.count * 1 ? true : false;
				}
			},
		}
	}
</script>

<style lang="scss">
	.page-box {
		background-color: #FFFFFF;

		.tip-title {
			font-size: 28rpx;
			line-height: 48rpx;
			margin-top: 18rpx;
			color: #666666;
			margin-left: 20rpx;
		}

		.mar-top-4 {
			margin-top: 4rpx;
		}

		.position-box {
			height: 136rpx;
			background-color: #FFFFFF;
			box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.05);
			z-index: 1;

			.position-name {
				font-size: 28rpx;
				line-height: 48rpx;
				color: #333333;
				font-weight: 500;
				max-width: 480rpx;
			}

			.position-text {
				color: var(--primary-color);
				font-size: 28rpx;
				line-height: 48rpx;

				.position-icon {
					font-size: 28rpx;
					margin-left: 8rpx;
				}
			}
		}

		.content-box {
			background-color: #F8F8F8;

			.store-item {
				background-color: #FFFFFF;
				border-radius: 12rpx;
				margin: 20rpx 20rpx 0;
				padding: 24rpx 0 24rpx 20rpx;

				&:nth-child(1) {
					margin-top: 10rpx;
				}

				&:nth-last-child(1) {
					margin-bottom: 20rpx;
				}

				.empty-image {
					width: 100%;
					height: 100%;
					background-color: #F2F3F5;
					box-sizing: border-box;

					.empty-image-icon {
						font-size: 72rpx;
						color: #cccccc;
					}
				}

				.store-item-content {
					flex: 1;
					padding: 0 20rpx;
					box-sizing: border-box;
					overflow: hidden;

					.store-tag {
						width: 76rpx;
						height: 32rpx;
						font-size: 20rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 32rpx;
						border-radius: 4rpx;
						margin-right: 8rpx;
						background: linear-gradient(90deg, rgba(var(--primary-rgb-color), 0.75) 0%, var(--primary-color) 100%);
					}

					.store-name {
						flex: 1;
						font-size: 32rpx;
						color: #333333;
						line-height: 32rpx;
						font-weight: 500;
						overflow: hidden;
					}

					.distance {
						color: #999999;
						margin-left: 20rpx;
					}

					.business-time {
						font-size: 24rpx;
						color: #999999;
						line-height: 36rpx;
						margin-top: 14rpx;

						text:nth-child(2) {
							margin-right: 28rpx;
						}
					}

					.goods-sale {
						font-size: 24rpx;
						color: #999999;
						line-height: 36rpx;
						margin-top: 4rpx;

						text:nth-child(1) {
							margin-right: 24rpx;
						}
					}

					.address {
						font-size: 24rpx;
						color: #999999;
						line-height: 36rpx;
						margin-top: 4rpx;

						.address-icon {
							margin-right: 8rpx;
							font-size: 23rpx;
						}
					}
				}
			}
		}
	}
</style>
